<template>
  <view style="padding-bottom: 150rpx;">
    <view style="color: #999;padding: 30rpx;"><text style="color: red;">*</text>区域会员申请流程</view>
    <view class="wrap">
      <u-form :model="form" ref="uForm" :rules="rules">
        <u-form-item label-width="150" label="区域名称" prop="region">
          <u-input placeholder="请选择区域" v-model="form.region" type="text" disabled @click="showPopups"></u-input>
        </u-form-item>

        <!-- <u-form-item label-width="150" label="区域Id" prop="regionId">
          <u-input placeholder="请选择区域" disabled v-model="form.regionId" type="text" maxlength="18"></u-input>
        </u-form-item> -->

        <u-form-item label-width="150" label="代理级别" prop="mobile">
          <u-input placeholder="请选择区域" disabled v-model="form.mobile" type="text" maxlength="11"></u-input>
        </u-form-item>
      </u-form>
      <!-- <view style="padding: 30rpx;">
        <text style="color: red;">*</text>
        运营商实名认证是通过比对姓名、身份证号、手机号的一致性，核验手机用户身份信息的真伪。请使用13、15、18开头的运营商手机号段。
      </view> -->
    </view>

    <u-button type="success" class="custom-style" @click="submit" shape="circle">{{btnText}}</u-button>

    <u-popup v-model="showAddressSelector" mode="bottom" closeable close-icon-size="20" border-radius="20">
      <region-pickes @addressSelectorChanged="addressSelectorChanged" @closeRegionpicke="showAddressSelector = false"
        :show="showAddressSelector"></region-pickes>
    </u-popup>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import regionPickes from '@/components/region-picke/region-picke2.vue'
  import * as API_Haibao from '@/api/haibao.js';
  import * as API_Address from '@/api/address.js'
  export default {
    components: {
      regionPickes
    },
    data() {
      return {
        btnText: '确认申请',
        form: {
          region: '',
          regionId: '',
          mobile: '',
          distribution: '',
        },
        rules: {
          region: [{
            required: true,
            message: '请选择区域',
            trigger: 'blur',
          }],
        },
        showAddressSelector: false,
        registed: false,
      }
    },
    onLoad() {

    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      showPopups() {
        // this.$u.toast('只能申请未选地区的区域代理')
        uni.showToast({
          title: '只能申请未选地区的区域代理',
          duration: 3000,
          icon: 'none'
        })
        this.showAddressSelector = true
      },
      //地址发生变化
      addressSelectorChanged(object) {
        console.log(object)
        let dengji = object[object.length - 1].region_grade
        if (dengji == 1) {
          this.form.mobile = '分公司'
          this.form.distribution = 1
        } else if (dengji == 2) {
          this.form.mobile = '运营中心'
          this.form.distribution = 2
        } else if (dengji == 3) {
          this.form.mobile = '服务中心'
          this.form.distribution = 3
        }

        const obj = {
          last_id: object[object.length - 1].id,
          addrs: object.map(key => {
            return key.local_name
          }).join('-')
        }
        this.form.regionId = obj.last_id
        this.form.region = obj.addrs

        this.registed = object[object.length - 1].registed
      },

      submit() {
        if (this.registed) {
          uni.showToast({
            title: '该地区已有区域会员，请选择其他未选地区~',
            duration: 3000,
            icon: 'none'
          })
        }
        this.$refs.uForm.validate(async valid => {
          if (valid) {
            console.log(this.form)
            uni.showLoading({
              title: '提交申请中...'
            })
            setTimeout(() => {
              uni.hideLoading()
            }, 1000)
            let res = await API_Address.applyRegion(this.form)
            console.log(res)
            if (res) {
              this.$qqyUtils.uToast.call(this, '申请成功！请等待审核~', 'success')
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/tabs/mine/mine'
                })
              }, 1200)
            } else {
              this.$qqyUtils.uToast.call(this, '申请失败', 'error')
            }
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F8F8F8;
  }

  .wrap {
    padding: 30rpx;
    background-color: #FFFFFF;
  }

  .custom-style {
    width: 90% !important;
    position: fixed !important;
    bottom: 50rpx !important;
    left: 5% !important;
  }
</style>
